<template>
    <div>
        <div class="content">
            <div class="title-tk">
                <text class="title-h1">{{questionLib.name}} ：</text>
                <div class="num">
                    <text class="num-b">{{question.index}}</text>
                    <text class="num-n">/{{questionLib.totalCount}}</text>
                </div>
            </div>
            <ChooseQuestion v-if="question.isChoose" :question=question></ChooseQuestion>

        </div>
        <div class="footer-bar">
            <a class="btn-pre" v-if="hasLast" v-on:click="last()">
                <text class="btn">上一题</text>
            </a>
            <a class="btn-next" v-if="hasNext" v-on:click="next()">
                <text class="btn">下一题</text>
            </a>
            <a class="btn-next" v-if="hasNext==false" v-on:click="jump('/test/over')">
                <text class="btn">完成答题</text>
            </a>
        </div>
        <AppHeader :title="headerTitle" :showBack=false :showPhoto=true></AppHeader>
    </div>
</template>

<style scoped>
    .content{
        margin-top: 110px;
        margin-left: 30px;
        margin-right: 30px;
    }
    .title-tk{
        flex-direction: row;
        border-bottom-width: 1px;
        border-bottom-color: #f0f0f0;
        border-bottom-style: solid;
        padding-bottom: 22px;
        margin-top: 20px;
    }
    .title-h1{
        flex: 8;
        font-size: 24px;
        color: #a1a1a1;
        width: 610px;
    }

    .num{
        flex: 1;
        flex-direction: row;
    }
    .num-b{
        font-size:32px;
        color: #2e2e2e;
        text-align: right;
    }
    .num-n{
        flex: 1;
        font-size: 24px ;
        color: #a1a1a1;
        text-align: left;
        margin-top: 8px;
    }

    .footer-bar {
        height: 130px;
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: #f2f2f2;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
    }
    .btn-next{
         background-color: #42b7ff;
         width: 330px;
         margin-left: 30px;
         border-radius: 6px;
         height: 88px;
         margin-top: 20px;
         padding-top: 20px;
     }
    .btn-pre{
        background-color: #42b7ff;
        width: 330px;
        margin-left: 30px;
        border-radius: 6px;
        height: 88px;
        margin-top: 20px;
        padding-top: 20px;
    }
    .btn{
        text-align: center;
        color: #fff;
        font-size: 36px;
    }


</style>
<script>
    import AppHeader from '../../components/AppHeader.vue'
    import ChooseQuestion from '../../components/ChooseQuestion.vue'
    import mixins from '../../mixins'

    module.exports = {
        mixins:[mixins],
        components: { AppHeader,ChooseQuestion },
        data(){
            return {
                answer:"",
                headerTitle:"问卷调查",
                num:Boolean,
                total:Boolean,
                questionLib:{},
                hasNext:false,
                hasLast:false,
                question:{
                    name:"",
                    next:"",
                    last:"",
                    index:0,
                    isChoose:false
                }
            }
        },
        created(){
            let self=this;
            var id =self.$route.params["id"];
            console.log("id:"+id);
            self.getPageData(id);
        },
        methods: {
            next(url) {
                console.log(this.question.next)
                this.getQuestion(this.question.next);
            },
            last(url){
                this.getQuestion(this.question.last);
            },
            getPageData:function(id){
                let self=this;
                self.request({
                    url:"/findFirstQuestion/"+id,
                    type:"post",
                    data:{
                        "access_token":self.accessToken
                    }
                }).then(res=>{
                    console.log(res);
                    if(res.status==1){
                        self.questionLib=res.data.questionLib;
                        self.hasNext = res.data.question.hasNext;
                        self.hasLast = res.data.question.hasLast;
                        self.question = res.data.question;
                    }
                });
            },
            getQuestion:function(id){
                let self=this;
                console.log("*****"+id);
                self.request({
                    url:"/question/"+id,
                    type:"post",
                    data:{
                        "access_token":self.accessToken
                    }
                }).then(res=>{
                    console.log(res);
                    if(res.status==1){
                        self.hasNext = res.data.question.hasNext;
                        self.hasLast = res.data.question.hasLast;
                        self.question = res.data.question;
                    }
                });
            }
        }

    }



</script>